<script setup lang="ts">


import {ArrowRight} from "@element-plus/icons-vue";
import {usePersonalMenu} from "../../hooks/usePersonalMenu";
import {useRouter} from "vue-router";

const router = useRouter()

const To = (path:string)=>{
  router.push(path).then()
}

const {menuTop, menuBottom} = usePersonalMenu()
</script>

<template>
  <div class="nav-box">
    <el-menu
        default-active="2"
        active-text-color="#362D2B"
        class="el-menu-vertical-demo menu-margin-top5"
    >
      <el-menu-item v-for="item in menuTop" :index="item.Title" @click="To(item.Path)">
        <div class="menu-tem-box">
          <span>{{ item.Title }}</span>
        </div>
      </el-menu-item>
    </el-menu>
    <div class="menu-border"></div>
    <el-menu
        default-active="2"
        active-text-color="#362D2B"
        class="el-menu-vertical-demo menu-margin-top5"
    >
      <el-menu-item v-for="item in menuBottom" :key="item.Title" :index="item.Title" @click="To(item.Path)">
        <div class="menu-tem-box menu-btm-flex">
          <span>{{ item.Title }}</span>
          <div class="menu-icon-box ">
            <el-icon>
              <ArrowRight/>
            </el-icon>
          </div>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped lang="scss">
@import "../style/PersonalNav";
</style>